<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="选择楼栋"></el-step>
                <el-step title="选择房屋"></el-step>
                <el-step title="业主信息"></el-step>
            </el-steps>
            <div class="first" v-if="active == 0">
                <building-card>
                    <template slot="btn">
                        <el-button
                            type="primary"
                            size="small"
                            @click="chooseBuilding"
                            >选择楼</el-button
                        >
                    </template>
                </building-card>
                <div class="btns">
                    <el-button type="primary" size="small" @click="goBack"
                        >返 回</el-button
                    >
                    <el-button type="primary" size="small" @click="handleNext"
                        >下一步</el-button
                    >
                </div>
            </div>
            <div class="second" v-if="active == 1">
                <house-card>
                    <template slot="btn">
                        <el-button
                            type="primary"
                            size="small"
                            @click="chooseHouse"
                            >选择房屋</el-button
                        >
                    </template>
                </house-card>
                <div class="btns">
                    <el-button type="primary" size="small" @click="handlePre"
                        >上一步</el-button
                    >
                    <el-button type="primary" size="small" @click="handleNext"
                        >下一步</el-button
                    >
                </div>
            </div>
            <div class="third" v-if="active == 2">
                <owner-card></owner-card>
                <div class="btns">
                    <el-button type="primary" size="small" @click="handlePre"
                        >上一步</el-button
                    >
                    <el-button type="primary" size="small" @click="handleDone"
                        >完 成</el-button
                    >
                </div>
            </div>
            <el-dialog
                title="选择楼"
                :visible.sync="chooseBuildingDialogVisible"
                width="40%"
            >
                <choose-building />
                <span slot="footer" class="dialog-footer">
                    <el-button @click="chooseBuildingDialogVisible = false">关闭</el-button>
                </span>
            </el-dialog>
            <el-dialog
                title="选择房屋"
                :visible.sync="chooseHouseDialogVisible"
                width="40%"
            >
                <choose-house />
                <span slot="footer" class="dialog-footer">
                    <el-button @click="chooseHouseDialogVisible = false">关闭</el-button>
                </span>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
import BuildingCard from "../../components/buildingCard";
import HouseCard from "../../components/houseCard";
import OwnerCard from "../../components/ownerCard";
import ChooseBuilding from "../../components/chooseBuilding";
import chooseHouse from "../../components/chooseHouse";
export default {
    name: "moveInHouse",
    components: {
        BuildingCard,
        HouseCard,
        OwnerCard,
        ChooseBuilding,
        chooseHouse,
    },
    data() {
        return {
            active: 0,
            chooseBuildingDialogVisible: false,
            chooseHouseDialogVisible: false,
        };
    },
    methods: {
        chooseBuilding() {
            this.chooseBuildingDialogVisible = true
        },
        chooseHouse() {
            this.chooseHouseDialogVisible = true
        },
        goBack() {
            this.$router.go("-1");
        },
        handlePre() {
            this.active = this.active - 1;
        },
        handleNext() {
            this.active = this.active + 1;
        },
        handleDone() {
            this.$router.push("/owner/ownerInfo/index")
        },
    },
};
</script>

<style lang="scss" scoped>
.btns {
    margin-top: 20px;
    text-align: right;
}
</style>